<template>
    <div class="ui page dimmer">
        <div class="content">
            <div class="center">
                <slot>
                    <!--<h2 class="ui inverted icon header">-->
                    <h2 class="ui inverted header dim_loader">
                        <!--<i class="icon-yundijie icon"></i>-->
                        <div class="loading"></div>
                        <!--{{txt||'Loading...'}}-->
                    </h2>
                </slot>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">

  export default {
    props: ['txt'],
  };
</script>

<style rel="stylesheet/less" lang="less" scoped>
    @import "../../common/style/mixin";
    @dir: "common/";

    .dim_loader {
        display: flex;
        height: 100px;
        align-items: center;
        justify-content: center;
        .loading{
            @w: 56px;
            @h: 56px;

            width: @w;
            height: @h;
            .bg-img(@dir, 'loading.gif', @w, @h);
        }
    }
</style>
